<template>
  <view>
    <view class="love-show" >{{content.timeText}}</view>
    <view class="content">
        <view>
            <view>你非常喜欢的人可能会出现在</view>
            <view class="love-time">
                <view  v-for="item in content.loveTime">{{item}}岁</view>
            </view>
        </view>
        <view>
            <view>你非常喜欢的人可能会出现在</view>
            <view class="love-time">
                <view class="money" v-for="item in content.Money">{{item}}月</view>
            </view>
        </view>
    </view>
    <view class="age-time">
        {{content.addTime[0] < content.addTime[1] ? content.addTime[0]
         : content.addTime[1]}}-
        {{content.addTime[0] > content.addTime[1] ? content.addTime[0]
         : content.addTime[1]}}岁</view>

    <view class="age" @click="reCommit"></view>

    <image
        class="tip"
        src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20240207/32d033831817facdf2bd1affb85934f0.png"
        mode="widthFix"
      ></image>

  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

</script>

<style lang="scss" scoped>
    .love-show{
        color: rgb(255,204,48);
        position: absolute;
        z-index: 99;
        top: 38%;
        right: 22%;
        font-weight: bolder;
    }
    .age-time{
        position: absolute;
        z-index: 99;
        top: 71%;
        left: 33%;
        color: white
    }
   .age{
        position: absolute;
        z-index: 99;
        top: 89%;
        height: 100rpx;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width: 40%;
        left: 30%;
        background-image: url('http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230524/1e1d9ccbdcec4859b68ffd3a47605fe6.png');
        background-size: 100% 100%;
    }
    .tip{
        z-index: 102;
        position: absolute;
        top: 81%;
        right: 15%;
        width: 60%;
    }
    .love-time{
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
            padding: 28rpx 45rpx;
            border-radius: 10rpx;
            border: 1rpx solid black;
            margin: 20rpx 0 ;
        }
        .year{
            background-color: rgb(255,244,149);
        }
        .money{
            background-color: rgb(255,109,154);
            color: white;
           
        }
    }
    .content{
        position: absolute;
        z-index: 99;
        top: 45%;
        height: 25%;
        width: 74%;
        left: 10%;
        padding: 28rpx;
        background-size: 100% 100%;
        

    }
</style>
